<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" href="../swiper/animate.min.css"/>
    <link rel="stylesheet" href="../swiper/swiper.3.2.0.min.css"/>
    <script src="../swiper/swiper.3.2.0.min.js"></script>
    <script src="../swiper/swiper.animate1.0.2.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            max-width: 640px;
            height: 100%;
            margin: 0 auto;
        }
        .swiper-container{
            width: 100%;
            max-width: 640px;
            height: 100%;
            position: absolute;
        }
        .swiper-wrapper .swiper-slide{
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 100%;
            text-align: center;
            color: #ffffff;
            max-width: 640px;
            height: 100%;
        }
        .swiper-wrapper .swiper-slide img{
            width: 100%;
        }
        .swiper-wrapper .swiper-slide:first-child{
            background-image: url("../image/wap_bg1.png");
        }
        .swiper-wrapper .swiper-slide:nth-child(2){
            background-image: url("../image/wap_bg2.png");
        }
        .swiper-wrapper .swiper-slide:nth-child(3){
            background-image: url("../image/wap_bg11.png");
        }
        .swiper-wrapper .swiper-slide:nth-child(4){
            background-image: url("../image/wap_bg5.png");
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
    </div>
    <!--<div class="swiper-pagination"></div>-->
    <!--<div class="swiper-button-prev"></div>-->
    <!--<div class="swiper-button-next"></div>-->
    <!--<div class="swiper-scrollbar"></div>-->
</div>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container',{
//        loop:'loop',
//        direction:'vertical',
//        pagination : '.swiper-pagination',
        mousewheelControl : true,
//        onlyExternal : true,
//        scrollbar:'.swiper-scrollbar',
//        prevButton:'.swiper-button-prev',
//        nextButton:'.swiper-button-next',
        effect : 'cube'
    })
</script>
</html>